<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">添加视频</block>
		</cu-custom>
		<view class="form">
			<view class="list" @click="getContent(0)">
				<text>标题名称</text>
				<input type="text" v-model="param.title" placeholder="请输入标题名称" />
			</view>
			<view class="list" @click="getContent(1)">
				<text>简要描述</text>
				<input type="text" v-model="param.briefDescription" placeholder="请一句话简要概述视频内容" />
			</view>
			<view class="lists" @click="getContent(2)">
				<text>视频素材</text>
				<view class="upVideo" @click="chooseVideo()" v-if="!videoBol">
					<image src="../../../static/img/basics/u106.png" mode=""></image>
				</view>
				<view class="showVideo showfixed" v-if="videoBol">
					<video class="myVideo" :src="param.file" controls></video>
					<view class="cu-tag bg-red" @tap.stop="DelImg">
						<text class='cuIcon-close'></text>
					</view>
				</view>
			</view>
		</view>
		<view class="submit">
			<button type="default" v-if="!isSubmit" >提交</button>
			<button type="primary" v-else @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isSubmit:false, //是否提交
				isFile:'',//视频是否返回
				uploadUrl: 'https://backend.sunsetcare-mirrortech.com:388/object/putObjectByStream', //文件上传接口
				bucketName: 'mirrortech-test',//上传
				thetype: '1598249702680', //时间戳
				videoBol: false,//视频
				src: '',//上传地址
				param:{
					briefDescription:"",//简要描述
					fileType: "1", //上传类型
					title: "",//标题
					releaseTime: "", //时间
					file:'' //视频地址
				},
				timestamp:"",//时间戳
			}
		},
		methods: {
			getContent(index){
				switch(index){
					case 0:
						if(this.$store.state.state&&this.$store.state.isphone){
							getApp().globalData.TTSSpeaker.stop();
							getApp().globalData.TTSSpeaker.speak(`视频素材标题名称，请输入`,1);
						}
					break
					case 1:
						if(this.$store.state.state&&this.$store.state.isphone){
							getApp().globalData.TTSSpeaker.stop();
							getApp().globalData.TTSSpeaker.speak(`视频素材简要描述，请输入`,1);
						}
					break
					case 2:
						if(this.$store.state.state&&this.$store.state.isphone){
							getApp().globalData.TTSSpeaker.stop();
							getApp().globalData.TTSSpeaker.speak(`视频素材上传，点击可拍摄上传或选择本地视频上传。`,1);
						}
					break
				}
			},
			DelImg(e) {
				 console.log(e,9999)
				let that =  this;
				uni.showModal({
					title: '添加视频',
					content: '确定要删除添加的视频吗？',
					cancelText: '再看看',
					confirmText: '再见',
					success: res => {
						if (res.confirm) {
							that.isSubmit = false
							that.param.file = ''
							that.videoBol  = false
						}
					}
				})
			},
			deleteRadio(){
				this.param.file = ''
			},
			submit(){
				this.param.releaseTime = this.getTimestamp()
				if(this.param.title==''){
					uni.showToast({
						title: '请填写标题',
						duration: 2000,
						icon:'none'
					})
				}else if(this.param.briefDescription==''){
					uni.showToast({
						title: '请填写描述',
						duration: 2000,
						icon:'none'
					})
				}else{
					this.$http('/college-service/collegeData/save','post',this.param).then(res=>{
						if(res.data.code==200){
							uni.showToast({
								title: '添加成功',
								duration: 2000,
								icon:'none'
							})
								uni.switchTab({
									url:'/pages/train/index'
								})
						}
					});
				}
			},
			chooseVideo() {
				var self = this;
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					success: function(res) {
						console.log(res.tempFilePath,999)
						self.src = res.tempFilePath;
						self.uploadImg(res.tempFilePath);
						self.videoBol = true;
					}
				});
			},
			timestampToTime(timestamp) {
				var date =new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
			 	 let  Y = date.getFullYear();
				 let M = (date.getMonth() +1 <10 ?'0' + (date.getMonth() +1) : date.getMonth() +1);
			 	 let D = (date.getDate() <10 ?'0' + (date.getDate()) : date.getDate());
				// let D = date.getDate() +'日';
			 let h = date.getHours()<10?'0'+date.getHours():date.getHours();
			 	let m = date.getMinutes()<10?'0'+date.getMinutes():date.getMinutes();
			  	let s = date.getSeconds()<10?'0'+date.getSeconds():date.getSeconds();
			    return Y+'-'+M+'-'+D//时分秒可以根据自己的需求加上
			},
			getTimestamp(){
					this.timestamp=new Date().getTime();
					return this.timestampToTime(this.timestamp)
			},	
			uploadImg(data) {
				uni.showLoading({title: '上传中',mask:true});
				this.isFile = false;
				 console.log(data,666)
				let sarr = data.split('/');
				const strs = sarr[sarr.length-1];
				const that = this;
				uni.uploadFile({
					url: that.uploadUrl + '?bucketName=' + that.bucketName + '&objectName=' + strs + '&theType=' + that.thetype +
						'&fileType=5' + '&url=' + data,
					filePath: data,
					name: 'file',
					formData: {
						file: data
					},
					success: function(res) {
						let data = JSON.parse(res.data);
						if(data.code == 200){
							that.param.file = data.data.data; //獲取線上地址
						}
					},
					fail: function(res) {
						console.log(res,'失败')
					},
					complete: function(res) {
						that.isSubmit = true;
						console.log(res,'完成')
						setTimeout(function () {uni.hideLoading();}, 100);
					}
				})
			},
		}
	}
</script>
<style lang="scss">
	.showfixed{
		position: relative;
		padding: 30rpx;
		background-color: #FFFFFF;
		.cu-tag{
			position: absolute;
			right: -16rpx;
			top: -6rpx;
			font-size: 23px !important;
			color: #FFFFFF;
			padding: 0px 6px;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.form .lists .cuIcon-close {
	    font-size: 17px;
	    margin-right:0;
	    line-height: 50px;
	    -webkit-flex-shrink: 0;
	    flex-shrink: 0;
	}
	.form {
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 0 32rpx;
		.list {
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #e5e5e5;
			text {
				font-size: 34rpx;
				margin-right: 40rpx;
			}
			input {
				flex: 1;
				height: 100%;
			}
		}
		.lists {
			width: 100%;
			height: auto;
			display: flex;
			text {
				font-size: 34rpx;
				margin-right: 40rpx;
				line-height: 100rpx;
				flex-shrink:0;
			}

			.upVideo {
				width: 230rpx;
				height: 230rpx;
				border-radius: 10rpx;
				border: 1px solid #e5e5e5;
				margin-top: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 180rpx;
					height: 180rpx;
				}
			}
			.showVideo{
				flex: 1;
				min-width: 0;
				margin-top: 40rpx;
				.myVideo{
					width: 100%;
					height: 400rpx;
				}
			}
		}
	}
	.submit{
		width: 100%;
		height: auto;
		padding: 0 32rpx;
		box-sizing: border-box;
		margin-top: 40rpx;
		button{
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
		}
	}

</style>
